<script setup>
import { useDark, useToggle } from '@vueuse/core'
import {onMounted, provide, ref} from "vue";
import {isUnauthorized} from "@/net";
import {getUserInfo} from "@/api/user";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const loading = ref(false)
provide('userLoading', loading)

onMounted(() => {
    if (!isUnauthorized()) {
        getUserInfo(loading)
    }
})

useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light'
})

useDark({
  onChanged(dark) { useToggle(dark) }
})

</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="wrapper">
      <router-view/>
    </div>
  </el-config-provider>
</template>

<style scoped>
.wrapper {
  line-height: 1.5;
}
</style>
